<template>
  <div class="products">
    <div class="container">
      <h1>美容产品展示</h1>
      <p class="subtitle">精选优质美容产品，为您的肌肤提供专业护理</p>
      
      <!-- Product Categories -->
      <div class="categories">
        <button 
          v-for="category in productCategories" 
          :key="category"
          :class="['category-btn', { active: selectedCategory === category }]"
          @click="selectedCategory = category"
        >
          {{ category }}
        </button>
      </div>
      
      <!-- Products Grid -->
      <div class="products-grid">
        <div 
          class="product-card" 
          v-for="product in filteredProducts" 
          :key="product.id"
        >
          <div class="product-image">
            <img :src="product.image" :alt="product.name" />
            <div class="product-badge" v-if="product.isNew">新品</div>
            <div class="product-badge bestseller" v-if="product.isBestseller">热销</div>
          </div>
          <div class="product-info">
            <h3>{{ product.name }}</h3>
            <p class="brand">{{ product.brand }}</p>
            <p class="description">{{ product.description }}</p>
            <div class="product-meta">
              <span class="price">{{ product.price }}</span>
              <span class="volume">{{ product.volume }}</span>
            </div>
            <div class="product-actions">
              <button class="view-details" @click="viewDetails(product)">
                查看详情
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Products',
  data() {
    return {
      selectedCategory: '全部',
      productCategories: ['全部', '护肤品', '化妆品', '身体护理', '特色产品'],
      categoryMap: {
        '全部': null,
        '护肤品': 2,
        '化妆品': 3,
        '身体护理': 4,
        '特色产品': 5
      },
      products: []
    }
  },
  computed: {
    filteredProducts() {
      if (this.selectedCategory === '全部') {
        return this.products;
      }
      const categoryId = this.categoryMap[this.selectedCategory];
      return this.products.filter(product => product.category_id === categoryId);
    }
  },
  async mounted() {
    await this.fetchProducts();
  },
  methods: {
    async fetchProducts() {
      try {
        const response = await fetch('/salon/product/list', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
          })
        });
        const data = await response.json();
        // 处理POST请求返回的数据格式
        const products = data.data || data.list || data;
        this.products = products.map(product => ({
          id: product.id,
          name: product.name,
          brand: product.brand,
          description: product.description,
          price: `¥${product.price}`,
          volume: product.volume || product.specification,
          category_id: product.category,
          category_name: product.category_name,
          isNew: product.is_new || false,
          isBestseller: product.is_bestseller || false,
          image: product.imageUrl
        }));
      } catch (error) {
        console.error('获取产品数据失败:', error);
        // 如果接口调用失败，使用默认数据
        this.products = [
          {
            id: 1,
            name: '深层保湿面霜',
            brand: 'LUXE',
            description: '24小时持久保湿，改善肌肤干燥问题',
            price: '¥298',
            volume: '50ml',
            category_id: 2,
            category_name: '护肤品',
            isNew: true,
            isBestseller: false,
            image: new URL('@/assets/baoshimianshuang.png', import.meta.url).href
          },
          {
            id: 2,
            name: '抗衰老精华液',
            brand: 'REJUVENATE',
            description: '减少皱纹，提升肌肤弹性',
            price: '¥458',
            volume: '30ml',
            category_id: 2,
            category_name: '护肤品',
            isNew: false,
            isBestseller: true,
            image: 'https://images.unsplash.com/photo-1596462502278-27bfdc403348?w=400&h=400&fit=crop'
          },
          {
            id: 3,
            name: '天然植物口红',
            brand: 'NATURE',
            description: '纯天然成分，多种颜色选择',
            price: '¥168',
            volume: '3.5g',
            category_id: 3,
            category_name: '化妆品',
            isNew: false,
            isBestseller: true,
            image: new URL('@/assets/kouhong.png', import.meta.url).href
          },
          {
            id: 4,
            name: '身体润肤乳',
            brand: 'SILK',
            description: '滋润全身肌肤，持久留香',
            price: '¥198',
            volume: '200ml',
            category_id: 4,
            category_name: '身体护理',
            isNew: false,
            isBestseller: false,
            image: 'https://images.unsplash.com/photo-1523293182086-7651a899d37f?w=400&h=400&fit=crop'
          },
          {
            id: 5,
            name: '眼部护理精华',
            brand: 'EYE CARE',
            description: '专门针对眼部细纹和黑眼圈',
            price: '¥328',
            volume: '15ml',
            category_id: 2,
            category_name: '护肤品',
            isNew: true,
            isBestseller: false,
            image: new URL('@/assets/hulijinghua.png', import.meta.url).href
          },
          {
            id: 6,
            name: 'VIP礼盒套装',
            brand: 'PREMIUM',
            description: '包含多种明星产品的豪华礼盒',
            price: '¥888',
            volume: '全套',
            category_id: 5,
            category_name: '特色产品',
            isNew: false,
            isBestseller: true,
            image: new URL('@/assets/viptaozhuang.png', import.meta.url).href
          }
        ];
      }
    },
    addToCart(product) {
      alert(`已将 ${product.name} 加入购物车`);
    },
    viewDetails(product) {
      alert(`查看产品详情: ${product.name}\n品牌: ${product.brand}\n价格: ${product.price}`);
    }
  }
}
</script>

<style scoped>
.products {
  padding: 4rem 0;
  background: #f8f9fa;
  min-height: 100vh;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

h1 {
  text-align: center;
  font-size: 2.5rem;
  color: #333;
  margin-bottom: 1rem;
}

.subtitle {
  text-align: center;
  font-size: 1.2rem;
  color: #666;
  margin-bottom: 3rem;
}

.categories {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.category-btn {
  padding: 0.8rem 1.5rem;
  border: 2px solid #667eea;
  background: white;
  color: #667eea;
  border-radius: 25px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s ease;
}

.category-btn.active,
.category-btn:hover {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  transform: translateY(-2px);
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.product-card {
  background: white;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.product-card:hover {
  transform: translateY(-5px);
}

.product-image {
  position: relative;
  height: 250px;
  overflow: hidden;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.product-card:hover .product-image img {
  transform: scale(1.1);
}

.product-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: #ff6b6b;
  color: white;
  padding: 0.3rem 0.8rem;
  border-radius: 15px;
  font-size: 0.8rem;
  font-weight: 600;
}

.product-badge.bestseller {
  background: #4ecdc4;
}

.product-info {
  padding: 1.5rem;
}

.product-info h3 {
  font-size: 1.3rem;
  color: #333;
  margin-bottom: 0.5rem;
}

.brand {
  color: #667eea;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.description {
  color: #666;
  line-height: 1.5;
  margin-bottom: 1rem;
}

.product-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.price {
  font-size: 1.3rem;
  font-weight: 700;
  color: #e74c3c;
}

.volume {
  color: #666;
  font-size: 0.9rem;
}

.product-actions {
  display: flex;
  gap: 0.5rem;
}

.add-to-cart {
  flex: 2;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 0.8rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: transform 0.3s ease;
}

.add-to-cart:hover {
  transform: translateY(-2px);
}

.view-details {
  flex: 1;
  background: #e9ecef;
  color: #333;
  padding: 0.8rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.3s ease;
}

.view-details:hover {
  background: #dee2e6;
}

@media (max-width: 768px) {
  .products-grid {
    grid-template-columns: 1fr;
  }
  
  .categories {
    gap: 0.5rem;
  }
  
  .category-btn {
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
  }
  
  .product-actions {
    flex-direction: column;
  }
  
  h1 {
    font-size: 2rem;
  }
}
</style>